var addFeed = false;

var divPos = {};


$(document).mousemove(function(e){
    var $div = $("#editor");
    divPos = {
        left: e.pageX - $div.offset().left,
        top: e.pageY - $div.offset().top
    };
});

Raphael.fn.connection = function (obj1, obj2, line, bg) {
    if (obj1.line && obj1.from && obj1.to) {
        line = obj1;
        obj1 = line.from;
        obj2 = line.to;
    }
    var bb1 = obj1.getBBox(),
        bb2 = obj2.getBBox(),
        p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
        {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
        {x: bb1.x - 1, y: bb1.y + bb1.height / 2},
        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
        {x: bb2.x + bb2.width / 2, y: bb2.y - 1},
        {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
        {x: bb2.x - 1, y: bb2.y + bb2.height / 2},
        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
        d = {}, dis = [];
    for (var i = 0; i < 4; i++) {
        for (var j = 4; j < 8; j++) {
            var dx = Math.abs(p[i].x - p[j].x),
                dy = Math.abs(p[i].y - p[j].y);
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                dis.push(dx + dy);
                d[dis[dis.length - 1]] = [i, j];
            }
        }
    }
    if (dis.length == 0) {
        var res = [0, 4];
    } else {
        res = d[Math.min.apply(Math, dis)];
    }
    var x1 = p[res[0]].x,
        y1 = p[res[0]].y,
        x4 = p[res[1]].x,
        y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
        y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
        x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
        y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    var path = ["M", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
    if (line && line.line) {
        line.bg && line.bg.attr({path: path});
        line.line.attr({path: path});
    } else {
        var color = typeof line == "string" ? line : "#000";
        return {
            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
            line: this.path(path).attr({stroke: color, fill: "none"}),
            from: obj1,
            to: obj2
        };
    }
};

var el;

window.onload = function () {
        var height = document.getElementById('editor').clientHeight;
        var width = document.getElementById('editor').clientWidth;
//        var leftPadding = document.getElementById('sidebar').clientWidth;
//        var topPadding = document.getElementById('navbar').clientHeight;
    
        r = Raphael("editor"),
        connections = [],
        shapes = [];    
    
    //Begin Draggable Imgge
    
    var a = r.image("../js/feediconk.png",100,100,40,40);
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 0.5});     
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        if (this.attr("y") > height - 40|| this.attr("x") > width - 40)
            this.attr({x: this.ox + dx, y: this.oy + dy}); 
        else {
            nowX = Math.min(width-40, this.ox + dx);
            nowY = Math.min(height-40, this.oy + dy);
            nowX = Math.max(0, nowX);
            nowY = Math.max(0, nowY);            
            this.attr({x: nowX, y: nowY });
            if (this.attr("fill") != "#000") this.attr({fill: "#000"}); 
        }
        for (var i = connections.length; i--;) {
                r.connection(connections[i]);
        }
    },
    up = function () {
        // restoring state
        this.attr({opacity: 100});
        if (this.attr("y") < 60 && this.attr("x") < 60)
            this.attr({fill: "#AEAEAE"});            
    };
    var b = r.image("../js/feediconk.png",100,200,40,40);
    // rstart and rmove are the resize functions;
    a.drag(move, start, up);
    b.drag(move, start, up);
    //End Draggable Img

    
    connections.push(r.connection(a, b, "#000"));    
    
};


function addEditor(){
	var g = r.image("../js/feediconk.png",divPos.left,divPos.top,40,40);
	g.drag(move,start,up);
	sessionStorage.setItem("g", g);
}

function addFeedSelected(component){
	addFeed = true;
	document.getElementById("editor").className="addCursor";
//	var z = document.getElementById("myForm:myMenu").firstChild;
	
//	console.log(document.getElementById(component));
//	alert(jQuery('#menu').val());	
//	alert(component.getAtt)
	
	req = new XMLHttpRequest();
	req.open("POST", "FeedMB.java", true);
	req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//	req.onreadystatechange = function() {
//		if(req.readyState == 4 && req.status == 200){
	//		var return_data = req.responseText;
	//		document.getElementById("status").innerHTML = return_data;
//		}
//	};
	req.send("teste=teste");
	
	document.getElementById("editor").onclick = function(){
    	if(addFeed == true){
    		addEditor();
    		addFeed=false;
    		document.getElementById("editor").className="defaultCursor";
    	//	document.getElementById("editor").
    	//	document.getElementById("editor").setAttribute("Teste", "teste");
    		someId ( [ {name: 'yourArg', value: 'yourValue' } ] );
    	}
    };
}

//$(document).ready(function(){
//	someId ( [ { name: 'yourArg', value: 'yourValue' }, { name: 'yourOtherArg', value: 'yourOtherValue' } ] );
//});




